<template>
  <div class="maintenance_create">
    <Row class="delivery_create_info">
      <Form
        inline
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="120"
        style="width: 850px;"
      >
        <div class="title"><span></span>基本信息</div>
        <FormItem prop="shopId" label="选择门店：">
          <treeselect
            :options="options"
            @select="selectListd"
            class="input-wid"
            :clearable="clearable"
            :disable-branch-nodes="true"
            style="width:260px"
            :normalizer="normalizer"
            noResultsText="未搜索符合的门店"
            noOptionsText="门店为空"
            placeholder="请选择门店"
            v-model="formValidate.shopId"
          />
        </FormItem>
        <FormItem prop="creatorPhone" label="创建人手机：">
          <Input v-model="formValidate.creatorPhone" style="width:260px" placeholder="请输入" />
        </FormItem>
        <FormItem prop="repairNo" label="维修单号：">
          <Input v-model="formValidate.repairNo" style="width:260px" placeholder="请输入" />
        </FormItem>
        <FormItem prop="initiator" label="发起人：">
          <Input v-model="formValidate.initiator" style="width:260px" placeholder="请输入" />
        </FormItem>
        <FormItem prop="initiator" label="申报时间：">
          <!-- <Input v-model="formValidate.initiator"
                 style="width:260px"
                 placeholder="请输入" /> -->
          <DatePicker type="datetime" placeholder="请选择" style="width:260px"></DatePicker>
        </FormItem>
        <FormItem prop="faultLevel" label="故障等级：">
          <Select v-model="formValidate.faultLevel" style="width:260px">
            <Option v-for="item in faultLevelList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="faultLevel" label="对应故障：">
          <Select v-model="formValidate.faultLevel" style="width:260px">
            <Option v-for="item in faultLevelList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <Row style="height:80px;"></Row>
        <div class="title"><span></span>机台信息</div>
        <FormItem prop="dh" label="机台名称：">
          <Input v-model="formValidate.dh" style="width:260px" placeholder="请输入" />
        </FormItem>
        <FormItem prop="dh" label="资产编码：">
          <Input v-model="formValidate.dh" style="width:260px" placeholder="请输入" />
        </FormItem>
        <FormItem prop="dh" label="游戏位：">
          <Input v-model="formValidate.dh" style="width:260px" placeholder="请输入" />
        </FormItem>
        <FormItem prop="dh" label="维修部位：">
          <Input v-model="formValidate.dh" style="width:260px" placeholder="请输入" />
        </FormItem>
        <FormItem prop="dh" label="数量：">
          <Input v-model="formValidate.dh" style="width:260px" placeholder="请输入" />
        </FormItem>
        <FormItem prop="dh" label="单位：">
          <Input v-model="formValidate.dh" style="width:260px" placeholder="请输入" />
        </FormItem>
        <FormItem prop="dh" label="机台供应商：">
          <Input v-model="formValidate.dh" style="width:260px" placeholder="请输入" />
        </FormItem>
        <FormItem prop="needDelay" label="是否延期：">
          <Select v-model="formValidate.needDelay" style="width:260px">
            <Option v-for="item in needDelayList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <Row style="height:80px;"></Row>
        <div class="title"><span></span>维修信息</div>
        <Form inline ref="formDynamic" :model="formDynamic">
          <el-table :data="formDynamic.list" :span-method="arraySpanMethod" border style="width: 100%">
            <el-table-column prop="step" label="流程" width="90">
              <template slot-scope="scope">
                <span>{{ ['', '第一步', '第二步', '第三步', '第四步', '第五步', '第六步'][scope.row.step] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="principal" label="负责方"> </el-table-column>
            <el-table-column prop="eventName" label="事件"> </el-table-column>
          </el-table>
        </Form>
        <Row>
          <FormItem>
            <Button type="primary" class="btn" style="margin-right: 24px;width:100px;" @click="submitForm">确认</Button>
            <Button class="btn" style="width:100px;" @click="reset">取消</Button>
          </FormItem>
        </Row>
      </Form>
    </Row>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { Table, TableColumn } from 'element-ui'
import { getOrgAllTree } from '@/api/system/org'
export default {
  name: 'maintenance_create',
  components: { Treeselect, ElTable: Table, ElTableColumn: TableColumn },
  data () {
    return {
      formValidate: {
        repairNo: '', // 维修单号
        creatorPhone: '',
        mergeData: {}, // 合并行的记录
        mergePos: {}, // mergeData中每项的索引
        mergeProp: ['step', 'principal'],
        mergeKeys: ['stepId', 'principalId'],
        initiator: '',
        shopId: null,
        faultLevel: '',
        dh: ''
      },
      formDynamic: {
        list: [
          {
            round: 1,
            step: 1,
            principal: '技术服务中心', // 负责方
            eventName: '厂家联系电话', // 事件
            eventValue: '345643546543'
          },
          {
            round: 1,
            step: 1,
            principal: '技术服务中心',
            eventName: '厂家联系人',
            eventValue: '打发丰富的是'
          },
          {
            round: 1,
            step: 1,
            principal: '技术服务中心',
            eventName: '返厂维修地址',
            eventValue: '菲尔特和投入黑胡椒撒发大水'
          }
        ]
      },
      options: [],
      faultLevelList: [],
      clearable: false,
      needDelayList: [
        { value: '0', label: '否' },
        { value: '1', label: '是' }
      ],
      normalizer (node) {
        return {
          id: node.id,
          label: node.orgName,
          children: node.childList && node.childList.length ? node.childList : undefined
        }
      },
      ruleValidate: {}
    }
  },
  mounted () {
    this.getSpanArr(this.formDynamic.list, this.mergeKeys)
    this.getOrg()
  },
  methods: {
    getOrg () {
      getOrgAllTree({
        merchantId: this.$store.state.user.merchantId,
        orgType: 1,
        status: 1,
        perms: 'moms:assets:receiptview'
      }).then(res => {
        if (res.data.status === 200) {
          this.options = [res.data.data]
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    selectListd () {},
    getSpanArr (tableData, keyName) {
      // if (tableData.length > 1) {
      // keyName.forEach((kitem, k) => {
      //   tableData.forEach((data, i) => {
      //     if (i === 0) {
      //       this.mergeData[kitem] = this.mergeData[kitem] || []
      //       this.mergeData[kitem].push(1)
      //       this.mergePos[kitem] = 0
      //     } else {
      //       // 判断当前元素与上一个元素是否相同
      //       if (data[kitem] === tableData[i - 1][kitem]) {
      //         this.mergeData[kitem][this.mergePos[kitem]] += 1
      //         this.mergeData[kitem].push(0)
      //       } else {
      //         this.mergeData[kitem].push(1)
      //         this.mergePos[kitem] = i
      //       }
      //     }
      //   })
      // })
      // }
      console.log(this.mergeData)
      console.log(this.mergePos)
    },
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      // if (this.mergeProp.includes(column.property)) {
      //   const _row = this.mergeData[column.property + 'Id'][rowIndex]
      //   const _col = _row > 0 ? 1 : 0
      //   return {
      //     rowspan: _row,
      //     colspan: _col
      //   }
      // }
    },
    submitForm () {},
    reset () {}
  }
}
</script>
<style lang="less" scoped>
.maintenance_create {
  .delivery_create_info {
    width: 850px;
    margin: auto;
  }
  .title {
    font-size: 14px;
    color: #464c5b;
    letter-spacing: 0;
    line-height: 20px;
    margin: 24px 0;
    padding-left: 40px;
    > span {
      display: inline-block;
      width: 8px;
      height: 20px;
      vertical-align: top;
      background: #2d8cf0;
      margin-right: 10px;
    }
  }
}
</style>
